<!DOCTYPE >
<html lang="en">

	<head>
		<title>订单确认-会员办理</title>
		<meta charset="UTF-8">
		<meta name="renderer" content="webkit">
		<meta name="format-detection" content="telephone=no">
		<meta http-equiv="X-UA-Compatible" content="IE=Edge">
		<meta name="keywords" content="" />
		<meta name="description" content="" />
		<meta name="author" content="广州小蚕科技" />
		<meta http-equiv="X-UA-Compatible" content="edge" />
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">
		<link rel="icon" type="image/vnd.microsoft.icon" href="/favicon.ico">
		<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
		<link rel="apple-touch-icon-precomposed" sizes="57x57" href="/img/icon-57.png">
		<link rel="apple-touch-icon-precomposed" sizes="72x72" href="/img/icon-72.png">
		<link rel="apple-touch-icon-precomposed" sizes="114x114" href="/img/icon-114.png">
		<link rel="apple-touch-icon-precomposed" sizes="144x144" href="/img/icon-144.png">
		<link rel="stylesheet" type="text/css" href="/css/public/reset.css">
		<script src="/js/public/plugin/jquery-1.9.1.min.js"></script>
		<script src="/js/public/plugin/qrcode.js"></script>
		<style type="text/css">
			.main_content {
				-webkit-tap-highlight-color: transparent;
				max-width: 700px;
				min-width: 300px;
				background-color: #fff;
				margin: 0 auto;
				padding: 15px;
				text-align: center;
			}
			
			.c666 {
				color: #666;
			}
			
			.title_content {
				position: relative;
				height: 50px;
				text-align: center;
				background: #1fafa2;
				line-height: 50px;
				color: #fff;
				font-size: 18px;
			}
			
			.title_img {
				width: 32px;
				height: 32px;
				position: absolute;
				left: 10px;
				top: 10px;
			}
			
			.payway {
				-webkit-tap-highlight-color: transparent;
				display: inline-block;
				width: 50%;
				height: 30px;
				line-height: 30px;
				text-align: center;
				font-size: 13px;
				color: #f66c95;
				border: 2px solid #f66c95;
				border-radius: 5px;
				margin-top: 9px;
			}
			
			.main_content h1 {
				margin-top: 100px;
				width: 100%;
				text-align: center;
				height: 30px;
				line-height: 30px;
				font-size: 16px;
			}
			
			.certain {
				cursor: pointer;
				display: inline-block;
				margin: 30px auto;
				width: 50%;
				height: 45px;
				line-height: 45px;
				font-size: 16px;
				text-align: center;
				background: #32d632;
				color: #fff;
				border-radius: 5px;
				border: 2px solid #32d632
			}
			
			.pay_content_wrap {
				display: none;
				position: fixed;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				background: rgba(0, 0, 0, 0.6);
			}
			
			.pay_content {
				position: relative;
				padding: 10px;
				width: 90%;
				margin: 0px auto;
				max-width: 600px;
				background: #fff;
			}
			
			.wxpay_content,
			.alipay_content {
				vertical-align: top;
				display: inline-block;
				width: 50%;
				text-align: center;
				padding-top: 10px;
			}
			
			.wxpay_content {
				border-right: 1px solid #eee;
			}
			
			.alipay_content {
				width: 48%;
				padding-top: 50px;
			}
			
			.wxpay_content .wximg {
				display: block;
				width: 120px;
				margin: 0px auto;
			}
			
			.wxpay_content #qrcode {
				width: 200px;
				margin: 10px auto;
			}
			
			.wxpay_content p {
				font-size: 14px;
				line-height: 32px;
				color: #333;
				text-align: center;
			}
			
			.alipay {
				cursor: pointer;
				display: block;
				height: 48px;
				margin: 30px auto 0;
				width: 120px;
				background: #47A8EF;
				border-radius: 5px;
				color: #fff;
				font-size: 18px;
				line-height: 48px;
				text-align: center;
			}
			
			.close {
				cursor: pointer;
				display: inline-block;
				position: absolute;
				top: 0;
				right: 0;
				width: 20px;
				height: 20px;
				font-size: 20px;
				color: #999;
			}
		</style>
		<script type="text/javascript">
			oPay = {
				operation: function() {
					function isWeiXin() {
						var ua = window.navigator.userAgent.toLowerCase();
						if (ua.match(/MicroMessenger/i) == 'micromessenger') {
							return true;
						} else {
							return false;
						}
					}
					if (oPay.isPhone()&&isWeiXin()) {
						$("#qrcode").css("width", "120px");
					}
					if(oPay.isPhone()&&!isWeiXin()){
						$('.wxpay_content').hide();
						$('.pay_content').css({"width":"250px","text-align":"center","padding-bottom":"40px"});
					}
					$('.pay_content').css("margin-top", ($(window).height() - 200) / 2 + "px");
					var qrcode = new QRCode($("#qrcode")[0], {
						width: $('#qrcode').width(),
						height: $('#qrcode').width()
					});
					qrcode.makeCode($('#qrcode').attr("url"));
					$(".certain").on('click', function() {
						$(".pay_content_wrap").show();
					})
					$(".close").on('click', function() {
						$(".pay_content_wrap").hide();
					})
				},
				isPhone: function() {
					var ua = navigator.userAgent;
					var ipad = ua.match(/(iPad).*OS\s([\d_]+)/),
						isIphone = !ipad && ua.match(/(iPhone\sOS)\s([\d_]+)/),
						isAndroid = ua.match(/(Android)\s+([\d.]+)/),
						isMobile = isIphone || isAndroid;
					if (isMobile) {
						return true;
					} else {
						return false;
					}
				},
				init: function() {
					this.operation();
				}
			}
			$(document).ready(function() {
				oPay.init();
			})
		</script>
	</head>

	<body>
		<div class="title_content">
			<img class="title_img" src="/img/official/logo_big.png"> 会员费用支付
		</div>
		<div class="main_content">
			<%if (code==0){%>
				<h1>亲爱的<%=levelname%>，您需要支付<%=price%>元</h1>
				<!--<h1 style="margin-top:10px">无独团郑重承诺：</h1>
				<h1 style="margin-top:10px">服务每一位会员到脱单为止，后期绝无隐形收费！</h1>-->
				<span class="certain">确认</span>
				<%}else{%>
					<h1><%=message%></h1>
					<%}%>
		</div>
		<div class="pay_content_wrap">
			<div class="pay_content">
				<span class="close">×</span>
				<div class="wxpay_content">
					<img class="wximg" src="/img/official/wxpay.png" alt="" />
					<div id="qrcode" url="<%=wxpay_url%>"></div>
					<p>请长按二维码识别支付(推荐)</p>
				</div>
				<div class="alipay_content">
					<img src="/img/official/alipay.png" style="width: 120px;" alt="" />
					<a href="<%=alipay_url%>">
						<div class="alipay">支付</div>
					</a>
				</div>
			</div>
		</div>
	</body>

</html>